<!--
 * @Description: 柱状图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: 赵文禄 2102404380@qq.com
 * @LastEditTime: 2025-09-26 09:08:09
-->
<template>
  <div id="c223" style="height: 190px;"></div>
</template>

<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request'
export default {
  data() {
    return {
      // params: {
      //   page: 1,
      //   pageSize: 100
      // },
      columnData: []
    };
  },
  computed: {},
  methods: {
    loadColumn() {
      const paletteSemanticRed = '#F4664A';
      const brandColor = '#5B8FF9';
      const columnPlot = new Column('c223', {
        data:this.columnData,
        xField: 'type',
        yField: 'value',
        seriesField: '',
        color: ({ type }) => {
           if (type === '山西农大主体育场工程') {
                        return 'pink';
                    } else if (type === '太原理工大学一号教学楼工程') {
                        return 'cyan';
                    } else if (type === '中北大学') {
                        return 'cornflowerblue';
                    }
                    return 'sandybrown';
        },
        label: {
          content: (originData) => {
            const val = parseFloat(originData.value);
            if (val < 0.05) {
              return (val * 100).toFixed(1) + '%';
            }
          },
          offset: 10,
        },
        legend: false,
        xAxis: {
          label: {
            // autoHide: true,
            autoRotate: false,
            autoEllipsis:true,
          },
        },
      });

      columnPlot.render();
    },
    async getColumnData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      // console.log(res, "获取响应");
      this.columnData = res.data;
    },
  },
  created() {  },
  async mounted() {
    await this.getColumnData();
    this.loadColumn();
  },
};
</script>
<style scoped>
div {
  width: 800px;
}
</style>